<template>
  <BaseMainSlot :show-search-box="false">
    <template v-slot:btn-box>
      <ActionBar
        :page-no="107"
        :has-edit="true"
        :has-save="false"
        :add-active="addActive"
        :del-active="delActive"
        :edit-active="editActive"
        @add="add"
        @del="del"
        @edit="edit"
      />
    </template>
    <template v-slot:table-box>
      <div class="zhtop" :style="setbackgroundzh()"></div>
      <div class="zhbottom">
        <div class="zhbottom-left">
          <div class="bot-title">已展示数据类型</div>
          <div class="bot-main">
            <div v-for="(item,index) in hasitemtypelist" :key="index" class="bot-item" @click="clickhasbutton(item)">{{ item.dataTypeName }}</div>
          </div>
        </div>
        <div class="zhbottom-right">
          <div class="bot-title">未展示数据类型</div>
          <div class="bot-main">
            <div v-for="(item,index) in nohasitemtypelist" :key="index" class="bot-item">{{ item.dataTypeName }}</div>
          </div>
        </div>
      </div>
    </template>
    <template v-slot:dialog>
      <!-- 对话框 -->

      <el-dialog
        :title="nowChanceStau ==='add'?'数据项添加':'数据项修改'"
        :visible.sync="datatypedialogVisible"
        width="30%"
      >
        <div style="width:100%;">
          <div class="dia-line">
            <div class="dia-title">数据类别选择:</div>
            <div class="dia-content">
              <el-select v-model="formData.dataType" value-key="dataTypeId" clearable :disabled="nowChanceStau !== 'add'" placeholder="数据类别选择" @change="datatypechange">
                <el-option v-for="(item,index) in (nowChanceStau ==='add'? nohasitemtypelist:hasitemtypelist)" :key="index" :label="item.dataTypeName" :value="item" />
                <!-- {value:item.dataTypeId,label:item.dataTypeName} -->
              </el-select>
            </div>
          </div>
          <!--          <div class="dia-line">-->
          <!--            <div class="dia-title">图标选择:</div>-->
          <!--            <div class="dia-content">-->
          <!--              <uploadimage @child-event="getimageurl" />-->
          <!--            </div>-->
          <!--          </div>-->
          <div class="dia-line">
            <div class="dia-title">位置选择:</div>
            <div class="dia-content">
              <div @click="innerVisible = true">
                <div v-if="!formData.xaxis">请选择位置</div>
                <div v-else-if="formData.xaxis">重新选择位置</div>
              </div>
            </div>
          </div>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="clickconcel()">取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
      <el-dialog
        width="1342px"
        title="请拖动位置"
        :visible.sync="innerVisible"
        append-to-body
        class="innerVis"
      >
        <div class="pot-xy" :style="setbackgroundzh()">
          <vue-drag-resize :x="formData.xaxis" :y="formData.yaxis" :w="300" :h="80" :is-draggable="true" :is-resizable="false" :parent-limitation="true" @dragstop="mczilongmet">
            <div class="mczilong">{{ nowselectdataTypeName }}</div>
          </vue-drag-resize>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button class="zh-button-one" @click="innerVisible = false">取 消</el-button>
          <el-button class="zh-button-two" type="primary" @click="innerVisible = false">确 定</el-button>
        </span>
      </el-dialog>
    </template>
  </BaseMainSlot>
</template>
<script>
import ActionBar from "@/components/ActionBar";
import BaseMainSlot from "@/components/BaseMainSlot/newBaseMainSlot.vue";
import nowpagereq from "@/api/basic-info-manage/data-type-manage/index";
// import uploadimage from "@/components/uploadimage/uploadimage.vue";
import { mymixin } from "@/utils/mixins"
// 引入拖拽组件
import Vue from "vue";
import VueDragResize from 'vue-drag-resize'
Vue.component('vue-drag-resize', VueDragResize)
// import { getToken } from '@/utils/auth';
export default {
  name: "DataTypeManage",
  components: { BaseMainSlot, ActionBar },
  mixins: [mymixin],
  data() {
    return {
      // 弹框选择的数据名称
      nowselectdataTypeName: "数据类型",
      // 当前选中的id
      nowdataTypeConfigId: "",
      // 对话框状态
      datatypedialogVisible: false,
      innerVisible: false,
      // 已展示数据项类型
      hasitemtypelist: [
        // { dataTypeName: "1" }
      ],
      hasindex: "",
      // 未展示数据项类型
      nohasitemtypelist: [
        { dataTypeName: "1" }
      ],
      nohasitem: "",
      image: '',
      formData: {
        xaxis: 50,
        yaxis: 50
      }
    }
  },
  watch: {
    nowChanceStau(newval) {
    // 当状态为删除的时候触发删除方法---另外的删除修改添加，通过点击保存，调用方法来实现
      if (newval === 'add' || newval === 'edit') {
        this.datatypedialogVisible = true
      }
    }
  },
  mounted() {
    this.getTableDataList()
    this.formData.xaxis = 50
    this.formData.yaxis = 50
  },
  methods: {
    // 选择数据类型
    async datatypechange(e) {
      this.nowselectdataTypeName = e.dataTypeName
      let { data: res } = await nowpagereq.querylist(e.dataTypeId)
      if (res === null) {
        res = {
          xaxis: 50,
          yaxis: 50
        }
      }
      this.formData = {
        xaxis: res.xaxis || 50,
        yaxis: res.yaxis || 50,
        dataTypeConfigId: e.dataTypeConfigId,
        dataType: { ...e, value: e.dataTypeId, label: e.dataTypeName }
        // ...e
      }
      this.nowselectdataTypeName = e.dataTypeName
      this.formData.yaxis = parseFloat(this.formData.yaxis)
      this.formData.dataTypeConfigId = res.dataTypeConfigId
      this.formData.xaxis = parseFloat(res.xaxis)
      if (res.dataTypeConfigId) {
        this.nowdataTypeConfigId = res.dataTypeConfigId
        this.formData.dataTypeConfigId = res.dataTypeConfigId
      }
      // console.log(res)
      // console.log("-----------")
      // console.log(this.formData)
    },
    mczilongmet(e) {
      this.formData["xaxis"] = e.left
      this.formData["yaxis"] = e.top
      // console.log(this.formData)
    },
    // ---上传图片相关方法-------
    getimageurl(e) {
      this.formData["image"] = e;
    },
    // 点击已展示数据项，添加或修改
    async clickhasbutton(e) {
      let { data } = await nowpagereq.querylist(e.dataTypeConfigId)
      this.nowdataTypeConfigId = e.dataTypeConfigId
      this.formData.dataTypeConfigId = e.dataTypeConfigId
      // this.formData.dataType = { ...e, value: data.dataTypeId, label: data.dataTypeName }
      this.$set(this.formData, 'dataType', { ...e, value: data.dataTypeId, label: data.dataTypeName })
      this.nowselectdataTypeName = data.dataTypeName
      this.formData.xaxis = parseFloat(data.xaxis) || 50
      this.formData.yaxis = parseFloat(data.yaxis) || 50
      this.formData.image = data.image
      // console.log(this.formData)
      this.editActive = true;
      // 删除的话就直接删除
      this.delActive = true;
    },
    getTableDataList() {
      // console.log(this.setbackgroundzh().PromiseResult)
      // console.log(this.setbackgroundzh())
      this.getnothasitemtype()
      this.gethasitemtype()
    },
    // 获取已有数据项类型
    gethasitemtype() {
      nowpagereq.gethasconfig().then(
        res => {
          if (res.code === 1) {
            this.hasitemtypelist = res.data
            this.$message.success("获取已有数据项类型成功");
          } else {
            this.$message.error("获取已有数据项类型失败");
          }
          // console.log(res)
        }
      )
    },
    // 获取未展示数据项类型
    getnothasitemtype() {
      nowpagereq.getnohasconfig().then(
        res => {
          if (res.code === 1) {
            this.nohasitemtypelist = res.data
            this.$message.success("获取未展示数据项成功");
          } else {
            this.$message.error("获取未展示数据项失败");
          }
        }
      )
    },
    // 删除
    delmessage() {
      if (this.nowChanceStau === 'del') {
        let delparam = [this.nowdataTypeConfigId]
        nowpagereq.dellist(delparam).then(
          res => {
            if (res.code === 1) {
              this.nowdataTypeConfigId = ""
              this.getTableDataList()
              this.$message.success('删除成功')
            } else {
              this.$message.error('删除失败')
            }
          }
        )
      }
    },
    save() {
      if (this.nowChanceStau === 'add') {
        let addparams = {
          dataTypeId: this.formData.dataType.value,
          dataTypeName: this.formData.dataType.label,
          xaxis: this.formData.xaxis,
          yaxis: this.formData.yaxis,
          image: this.zhimageurl
        }
        nowpagereq.addlist(addparams).then(
          res => {
            if (res.code === 1) {
              this.getTableDataList()
              this.$message.success('添加成功')
            } else {
              this.$message.error('添加失败')
            }
            this.datatypedialogVisible = false
            this.resetActionBar()
          }
        )
      } else if (this.nowChanceStau === 'edit') {
        let editparams = {
          dataTypeId: this.formData.dataType.value,
          dataTypeName: this.formData.dataType.label,
          dataTypeConfigId: this.formData.dataTypeConfigId,
          xaxis: this.formData.xaxis,
          yaxis: this.formData.yaxis,
          image: this.formData.image
        }
        nowpagereq.editlist(editparams).then(
          res => {
            if (res.code === 1) {
              this.getTableDataList()
              this.$message.success('修改成功')
            } else {
              this.$message.error('修改失败')
            }
            this.datatypedialogVisible = false
            this.resetActionBar()
          }
        )
      }
    },
    // 点击取消按钮重置状态
    clickconcel() {
      this.datatypedialogVisible = false
      this.resetActionBar()
    },
    // 设置背景图
    setbackgroundzh() {
      let farmingtypeid = sessionStorage.farmingTypeNo
      // let farmingtypeid = 1
      // console.log(res[0].image)
      this.ownFarmingTypelist()
      // console.log(this.image)
      // this.$nextTick(() => {
      if (this.image === undefined) {
        var backurl = ""
        switch (farmingtypeid) {
          case 'dt':
            backurl = require("@/assets/oth-img/大田种植.png")
            break;
          case "dp":
            // 大棚种植
            backurl = require("@/assets/oth-img/农业大棚.png")
            break;
          case "xm":
            // 畜牧养殖
            backurl = require("@/assets/oth-img/畜牧.png")
            // backurl = require("@/assets/oth-img/生态沟渠.png")
            break;
          case "sc":
            // 水产养殖
            backurl = require("@/assets/oth-img/水产养殖.png")
            break;
          case "gc":
            // 工厂养鱼
            backurl = require("@/assets/oth-img/工厂养鱼.png")
            break;
          default:
            // backurl = '@/assets/oth-img/big-fac.jpg'
            backurl = require("@/assets/oth-img/big-fac.jpg")
            break;
        }
        // return require('@/assets/oth-img/big-fac.jpg')
        return 'background-image: url(' + backurl + ')'
      } else {
        return 'background-image:url(' + 'data:image/png;base64,' + this.image + ')'
      }
      // })
    },
    async ownFarmingTypelist() {
      let farmingtypeid = sessionStorage.farmingTypeNo
      const { data: res } = await nowpagereq.ownFarmingTypelist({ farmingTypeNo: farmingtypeid, organizationNo: sessionStorage.organizationNo })
      this.image = res[0].image
      // console.log(this.image)
      return res[0].image
    }
  }
}
</script>
<style lang="scss" scoped>
.dia-line{
    width: 100%;
    display: flex;
    height: 36px;
    line-height: 36px;
    margin-bottom: 10px;
    .dia-title{
        width: 20%;
        white-space: nowrap;
    }
    .dia-content{
        width: 80%;
    }
}
.pot-xy {
    width: 1300px;
    max-width: 1300px;
    height: 600px;
    min-height: 600px;
      // max-height: 600px;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 1300px 100%;
    position: relative;
    .mczilong{
        height: 80px;
        line-height: 80px;
        background-color: #1fce4b;
        color: #fff;
        white-space: nowrap;
        text-align: center;
        cursor: pointer;
        font-weight: 600;
        font-size: 20px;
    }
}
.zhtop{
    width: 100%;
    height: 50%;
    // border: solid springgreen 2px;
    margin-bottom: 1%;
    background-image:url(https://img.js.design/assets/img/611397edd36ba0075c111517.jpg);
    background-position: bottom;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    border-radius: 10px;
    padding: 10px;
}
// .innerVis {
//   max-width: 1042px;
// }
.zhbottom{
    width: 100%;
    height: 49%;
    display: flex;
    justify-content: space-between;
    .zhbottom-left{
        width: 50%;
        height: 100%;
        border: 1px solid rgba(6, 191, 249, 1);
        .bot-title{
            width: 100%;
            height: 35px;
            font-size: 23px;
            line-height: 35px;
            background-color: rgba(6, 191, 249, 1);
            text-align: center;
            letter-spacing: 14px;
        }
        .bot-main{
            width: 100%;
            // height: calc(100% - 35px);
            max-height: calc(100% - 35px);
            padding: 10px;
            font-size: 20px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            // justify-content: center;
            align-items:center;
            overflow: auto;
            .bot-item{
                border: 1px solid rgba(6, 191, 249, 1);
                // width: 100px;
                min-width: 145px;

                height: 36px;
                text-align: center;
                line-height: 36px;
                border-radius: 6px;
                font-weight: 700;
                padding: 0px 10px;
                // width: 145px;
                margin: 5px;
            }
        }
    }
    .zhbottom-right{
        width: 49%;
        height: 100%;
        border: 1px solid rgba(217, 217, 217, 1);
        .bot-title{
            width: 100%;
            height: 35px;
            font-size: 23px;
            line-height: 35px;
            background-color: #d9d9d9;
            color: rgba(1, 59, 77, 1);
            letter-spacing: 14px;
            font-size: 26px;
            text-align: center;
        }
        .bot-main{
            width: 100%;
            max-height: calc(100% - 35px);
            padding: 10px;
            font-size: 20px;
            display: flex;
            flex-wrap: wrap;
            flex-direction: row;
            align-items:center;
            overflow: auto;
            .bot-item{
                border: 2px solid #d9d9d9;
                min-width: 100px;
                height: 40px;
                padding: 0px 10px;

                text-align: center;
                line-height: 36px;
                border-radius: 5px;
                font-weight: 700;
                white-space: nowrap;
                margin: 5px;
            }
        }
    }
}

</style>
